import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { DNavBar, DAtInpute, Ddialog } from '@/components'
import http from '@/api'
import { AtList, AtListItem } from 'taro-ui'
import sdk from '@/common/sdk'
import './myinfo.scss'
import { handlePhone } from '@/utils'

export default class MyinfoBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userinfo: {
        name: '',
        telphone: '',
        enterform: '',
        id: '',
        isShow: false,
        Dtext: '',
        accountInfo: '',
        isOpenAccount: false,
        showAccDialog: false,
      },
      accountContent: '企业账户未开通电子收款账户，将会影响企业收款，是否前往开通？',
      title: '个人信息',
      page: 1
    }
  }

  componentDidMount() {
    const { token } = this.$router.params
    if (token) {
      localStorage.setItem('X-Auth0-Token', token)
    }
    this.getUserInfo()
  }

  componentDidShow() {
    let { title, page } = this.state
    sdk.setTitleInfo(title)
    if (page > 1) {
      this.getUserInfo()
    }
  }

  getUserInfo() {
    http.myselfDetail().then(res => {
      if (!res) {
        return
      }
      let _userinfo = ['imName', 'imPhone', 'entName', 'entId']
      let { userinfo, page } = this.state
      Object.keys(userinfo).map((item, i) => {
        userinfo[item] = res[_userinfo[i]]
      })
      page++
      userinfo.imIdStatus = res.imIdStatus
      userinfo.authStatus = res.authStatus
      this.setState({
        userinfo,
        page
      })
    })
  }

  //我的企业
  toMycompany() {
    let { userinfo } = this.state
    if (userinfo.id === '') {
      return this.setState({
        isShow: true
      })
    }
    Taro.navigateTo({
      url: `/pages/mycompany/mycompany?id=${userinfo.id}`
    })
  }

  //修改姓名
  toEditname() {
    let { userinfo } = this.state
    Taro.navigateTo({
      url: `/pages/editname/editname?name=${userinfo.name}`
    })
  }

  //修改密码
  toEditpassword() {
    let { userinfo } = this.state
    Taro.navigateTo({
      url: `/pages/editpassword/editpassword?telphone=${userinfo.telphone}`
    })
  }

  //修改手机号码
  toEditphone() {
    let { userinfo } = this.state
    Taro.navigateTo({
      url: `/pages/editphone/editphone?telphone=${userinfo.telphone}`
    })
  }

  oncompanyHandle = () => {
    let { userinfo } = this.state
    if (userinfo.id === '') {
      // if (userinfo.imIdStatus == 0) {
      return this.setState({
        isShow: true
      })
    }
    Taro.navigateTo({
      url: `/pages/companydetail/companydetail?id=${userinfo.id}`
    })
  }
  onCancel() {
    this.setState({
      isShow: false,
      showAccDialog: false
    })
  }
  onSure(type) {
    this.onCancel()
    if (type == 'openAcc') {
      Taro.navigateTo({
        url: `/pages/accountBook/accountBook`
      })
      return
    }
    Taro.navigateTo({
      url: `/pages/myinfo/authentication`
    })
  }

  // 跳转手机号页面
  toPhone() {
    let { userinfo } = this.state
    Taro.navigateTo({
      url: `/pages/myphone/myphone?telphone=${userinfo.telphone}`
    })
  }

  // 跳转认证信息
  toAuthentication = () => {
    Taro.navigateTo({
      url: `/pages/myinfo/authentication`
    })
  }

  // 跳转我的支付账户
  toMypay = async () => {
    let { eaIsAppro } = await http.getConfirmInfo()
    // eaIsAppro:  企业审核状态(0待审核，1审核通过，2审核未通过)
    if (eaIsAppro != 1) {
      this.setState({
        isShow: true
      })
      return
    }
    // infoByEnterprise 这个接口如果返回空对象则说明是没有开通电子登记簿，需要引导用户开通电子登记簿
    let accountInfo = await http.infoByEnterprise()
    let keys = Object.keys(accountInfo)
    if (!keys.length) {
      this.setState({
        showAccDialog: true
      })
    } else {
      if (accountInfo.status === '') {
        this.setState({
          showAccDialog: true,
          accountContent: '电子登记簿开通失败，请重新开通'
        })
        return
      }
      Taro.navigateTo({
        url: '/pages/payaccount'
      })
    }
  }

  toMyent() {
    // 跳转我的企业
    let { userinfo } = this.state
    if (userinfo.imIdStatus == 0) {
      this.setState({
        isShow: true
      })
    } else {
      Taro.navigateTo({
        url: '/pages/myEnterprise'
      })
    }
  }

  render() {
    const { userinfo, Dtext, isShow, title, showAccDialog, accountContent } = this.state
    return (
      <View className="b_myinfo">
        <DNavBar title={title}></DNavBar>
        <View className="b_myinfo__box">
          <View className="b_myinfo__content">
            <View className="b_myinfo__information">
              <DAtInpute className="b_myinfo__information_item" title="个人姓名" value={userinfo.name} icon="chevron-right" onRightHanlde={this.toEditname.bind(this)}></DAtInpute>
              <DAtInpute
                className="b_myinfo__information_item"
                title="手机号码/账号"
                icon="chevron-right"
                value={handlePhone(userinfo.telphone)}
                onRightHanlde={this.toPhone.bind(this)}
              ></DAtInpute>
              {/* <DAtInpute className='b_myinfo__information_item' title='所在企业' value={userinfo.enterform} icon='chevron-right' onRightHanlde={this.toMycompany.bind(this)}></DAtInpute> */}

              <DAtInpute className="b_myinfo__information_item" title="所在企业" icon="chevron-right" onRightHanlde={this.oncompanyHandle.bind(this)}></DAtInpute>
            </View>
          </View>

          <View className="b_myinfo__operating">
            <DAtInpute className="b_myinfo__information_item" title="认证信息" icon="chevron-right" onRightHanlde={this.toAuthentication}></DAtInpute>
            {userinfo.imIdStatus == 1 && <DAtInpute className="b_myinfo__information_item" title="企业收款账户" icon="chevron-right" onRightHanlde={this.toMypay}></DAtInpute>}
            {
              userinfo.imIdStatus == 1 && <DAtInpute className="b_myinfo__information_item" title="管理企业" icon="chevron-right" onRightHanlde={this.toMyent.bind(this)}></DAtInpute>
            }
            <DAtInpute className="b_myinfo__information_item" title="修改密码" icon="chevron-right" onRightHanlde={this.toEditpassword.bind(this)}></DAtInpute>
          </View>

          {/* <View className="b_myinfo__operating">
                        <AtList>
                            <AtListItem title='修改手机号码' onClick={this.toEditphone.bind(this)} arrow='right' />
                            <AtListItem title="修改密码" onClick={this.toEditpassword.bind(this)} arrow="right" />
                        </AtList>
                    </View> */}
        </View>
        {/* 请先进行企业信息认证后再访问 */}
        <Ddialog isShow={isShow} content="为了您的交易安全，请进行信息认证 信息认证后可或得更多权限" btnText="信息认证" onCancel={this.onCancel.bind(this)} onSure={this.onSure.bind(this)}></Ddialog>
        <Ddialog isShow={showAccDialog} content={accountContent} btnText="前往开通" onCancel={this.onCancel.bind(this)} onSure={this.onSure.bind(this, 'openAcc')}></Ddialog>
      </View>
    )
  }
}
